<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调refs中回调执行次数的问题</title>
    <style>

    </style>
</head>
<body>
<!--准备好一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>

<!--引入React核心库-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/react.development.js"></script>
<!--引入React-Dom，用于支持React操作Dom-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/babel.min.js"></script>

<script type="text/babel">

    //创建组件
    class Demo extends React.Component {

        state = {isHot: true}

        showInfo = () => {
            const {input1} = this
            alert(input1.value);
        }

        changWeather = () => {
            this.setState({
                isHot: !this.state.isHot
            })
        }

        saveInput = (currentNode)=>{
            this.input1 = currentNode;
            console.log('#', currentNode)
        }

        render() {
            const {isHot} = this.state;
            return (
                <div>
                    <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    {/*
                        <input ref={(currentNode) => {this.input1 = currentNode;console.log('#',currentNode)}} type="text"
                            placeholder="点击按钮提示数据"/>&nbsp;
                    */}
                    <input ref={this.saveInput} type="text"
                           placeholder="点击按钮提示数据"/>
                    <button onClick={this.showInfo}>点我提示输入的数据</button>
                    <button onClick={this.changWeather}>点我切换天气</button>
                </div>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Demo/>, document.getElementById('root'));

</script>

</body>
</html>
